<template>
  <div id="">
    <template style="text-align:left">
      <el-tabs tab-position="left" >
        <el-tab-pane label="All"><all></all></el-tab-pane>
        <el-tab-pane label="0.00 - 100.00">用户管理</el-tab-pane>
        <el-tab-pane label="100.00 - 500.00">配置管理</el-tab-pane>
        <el-tab-pane label="500.00 - 1000.00">角色管理</el-tab-pane>
        <el-tab-pane label="1000.00 - 2000.00">定时任务补偿</el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>
<script>
import  all from  './all'
export default {
  name: '',
  props: {},
  data() {
    return {};
  },
  // 子组件转换
  components: {all,},
  // 数据引入
  mounted() {
  },
  created() {
  },
  //点击函数事件
  methods: {
    handleOpen() {

    },
    handleClose() {

    }
  },
  //计算事件
  computed: {},
  //数据监听
  watch: {},
  //过滤器
  filters: {},
  //设定自定义指令
  directives: {},
}
</script>
<style lang="scss" scoped>
/deep/ {
  .el-tabs--left .el-tabs__active-bar.is-left, .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    right: 190px;
    left: auto;
  }

  .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
  }
  .el-tabs__item {
    padding: 0 55px;
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    position: relative;
  }
  .el-tabs__item.is-active {
    color: #E48538;
  }
  .el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #E48538;
    z-index: 1;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    list-style: none;
  }
}
</style>